<template>
  <!--在制品出入库状态-->
  <div class="exit_status">
    <span class="block_label_color mad_label"
          :class="stateColor">{{data.semisStoreStatusLabel}}</span>
  </div>
</template>

<script>
export default {
  name: 'ExitStatus',
  props: {
    data: Object
  },
  computed: {
    stateColor() {
      switch (this.data.semisStoreStatusValue) {
        case 'OutStored':
          return 'exit_status_off'
        case 'ToBeOutStored':
          return 'exit_status_to_be'
        case 'ToBeInStored':
          return 'exit_status_pending'
        case 'InStored':
          return 'exit_status_warehousing'
        case 'InStoredFailed':
          return 'exit_status_in_err'
        case 'OutStoredFailed':
          return 'exit_status_out_err'
      }
    }
  }
}
</script>

<style scoped lang="less">
  // 已出库
  @ExitStatusOff: #7e8e9f;
  // 待出库
  @ExitStatusToBe: #ff931f;
  // 待入库
  @ExitStatusPending: #00b4ff;
  // 已入库
  @ExitStatusWarehousing: #00a949;
  // 入库失败
  @ExitStatusInErr: #f8000f;
  // 出库失败
  @ExitStatusOutErr: #f8000f;
  .exit_status{
    .block_label_color{
      &.exit_status_off{
        background-color: @ExitStatusOff;
      }
      &.exit_status_to_be{
        background-color: @ExitStatusToBe;
      }
      &.exit_status_pending{
        background-color: @ExitStatusPending;
      }
      &.exit_status_warehousing{
        background-color: @ExitStatusWarehousing;
      }
      &.exit_status_in_err{
        background-color: @ExitStatusInErr;
      }
      &.exit_status_out_err{
        background-color: @ExitStatusOutErr;
      }
    }
  }
</style>
